@import "../../common/tool.less";
.header_main{
    //@vw:1px;
    opacity: 1!important;
    //background: @primary_bg;
    padding: 0;
    .header{
        padding: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .header_logok{
            width: 80*@vw;
            height: 80*@vw;
            line-height: 0;
            cursor: pointer;
            .header_logo{
                width: 100%;
                height: 100%;
            }
        }
        .header_tablist{
            display: flex;
            .tabitem{
                color: #fff;
                font-size: 16*@vw;
                padding: 0 23*@vw;
                position: relative;
                cursor: pointer;
                transition: all .08s linear;
                .line{
                    display: none;
                    position: absolute;
                    bottom:-3*@vw;//38
                    right:23*@vw;//22
                    width: 45*@vw;//48
                    height: 3*@vw;
                    background: @primary;
                }
                &:hover{
                    transform: translateY(-3px);
                }
                &.active{
                    //color: @primary;
                    .line{
                        display: block;
                    }
                }
                .tabitem_text{
                    position: relative;
                    z-index: 10;
                }
            }
        }
        .header_right{
            display: flex;
            align-items: center;
            .header_langiconk{
                width: 38*@vw;
                height: 38*@vw;
                line-height: 0;
                margin-left: 15*@vw;
                cursor: pointer;
                position: relative;
                .langicon{
                    width: 100%;
                    height: 100%;
                    opacity: 0.8;
                    &:hover{
                        opacity: 1;
                    }
                }

                .lang_set{
                    display: none;
                    position: absolute;
                    z-index: 50;
                    right: 0;
                    top:115%;
                    width: 160*@vw;
                    border-radius: 6*@vw;
                    background: @background;
                    padding: 10*@vw 0;
                    .setitem{
                        height: 40*@vw;
                        line-height: 40*@vw;
                        text-align: center;
                        font-size: 14*@vw;
                        cursor: pointer;
                        color: #101010;
                        white-space: nowrap;
                        &:hover{
                            background: @primary_bg;
                            color: #fff;
                        }
                    }
                }
            }
            .header_login{
                //display: none;
                height: 100%;
                line-height: 40*@vw;
                font-size: 16*@vw;
                color: #fff;
                padding-left: 15*@vw;
                cursor: pointer;
                transition: all 0.1s linear;
                opacity: 0.8;
                &:hover{
                    opacity: 1;
                }
            }
            .header_userk{
                //display: none;
                .header_user{
                    display: flex;
                    align-items: center;
                    padding: 0 0 0 15*@vw;
                    position: relative;
                    cursor: pointer;
                    .user_img{
                        width: 40*@vw;
                        height: 40*@vw;
                        object-fit: cover;
                        border-radius: 50%;
                    }
                    .user_icon{
                        margin-left: 11*@vw;
                        width: 12*@vw;
                        transform-origin: center center;
                        transform: rotate(180deg);
                        transition: all .1s linear;
                    }
                    .user_set{
                        display: none;
                        position: absolute;
                        z-index: 50;
                        right: 0;
                        top:115%;
                        min-width: 160*@vw;
                        border-radius: 6*@vw;
                        background: #fff;
                        padding: 10*@vw 0;
                        .setitem{
                            height: 40*@vw;
                            line-height: 40*@vw;
                            text-align: center;
                            font-size: 14*@vw;
                            padding: 0 20*@vw;
                            cursor: pointer;
                            white-space: nowrap;
                            color: #101010;
                            &:hover{
                                background: @primary_bg;
                                color: #fff;
                            }
                        }
                    }
                    &.active{
                        .user_icon{
                            transform: rotate(0deg);
                        }
                    }
                }
            }
        }
    }
}

.header_fff .header_main,
.header_main.notop{
    background: #FFFFFF;
    .header{
        .header_tablist {
            display: flex;
            .tabitem {
                color: #333;
                &.active{
                    color: @primary;
                }
                .line{
                    display: none;
                }
            }
        }
        .langicon{
            background: @primary;
            border-radius: 50%;
        }
        .header_login{
            color: @primary;
        }
    }
}
